# Component: Shop Price

Atomic price display with currency formatting

Ecommerce Atom

### BEM Anatomy

| Type      | Class Name       | Description                                                                            |
| --------- | ---------------- | -------------------------------------------------------------------------------------- |
| ==Block== | `.as-shop-price` | The outer wrapper. Manages the vertical rhythm and bottom spacing.                     |
| Element   | `__label`        | The text span containing the actual price. Styled with `font-weight: bold` by default. |

### Dynamic Application

The component supports a dynamic `PriceTagClass` (passed via `@PriceTagClass`) to allow for contextual styling—such as changing font sizes or colors for sale prices—without breaking the BEM structure.

##### Generated HTML

```html
<div class="as-shop-price">
    <span class="as-shop-price__label h4 text-primary">
        $29.99
    </span>
</div>
```

##### SCSS

```scss
.as-shop-price {
  // Provides half-spacer clearance
  margin-bottom: 0.5rem;

  &__label {
    // Ensures price visibility
    font-weight: bold;
  }
}
```
